<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台管理页面</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>

        * {
            /* 页面初始化 清除页面元素原有的内外边距 */
            padding: 0;
            margin: 0;
        }
        body {
            height: 100vh;
            /* 背景渐变色 */
            background: linear-gradient( 180deg ,#99f, #f99);
        }
        header{

            border-bottom:3px solid rgb(64,159,253);

        }
        header > div > div {
            height: 50px;
        }

        section > div > div {
            height: 1000px;
        }

        section .col-md-2 {
            background-color: rgba(9,9,9,.4);
            padding:50px 50px;
        }



        .panel-default {
            background-color: rgba(0, 0, 0, 0);
            border: 0;
            color: #333333
        }
        .panel-default a{
            display: inline-block;
            width: 200px;
            height: 20px;
            overflow: hidden;
            color: #333333;
        }

        .panel-default ul li a{
            margin-bottom: 10px;
        }
        .panel-default ul li a:hover{
            color: rgb(64,159,253);
        }

        .panel-default > .panel-heading {
            padding-bottom: 3px;
            background-color: rgba(0, 0, 0, 0);
        }
        .panel-body{
            padding-bottom: 0;
        }

        tr>th{
            text-align: center;
        }
       .glyphicon-user{
           display: inline-block;
           height: 40px;
           width: 40px;
           color: black;
           background-color: white;
           text-align: center;
           line-height: 40px;
           border-radius: 40px;
            font-size: 20px;
        }

        .panel-heading{
            margin-bottom: 20px;
        }
        .panel-default i{
            color: rgb(64,159,253) ;
        }
        #logo{
            font-family: 华文新魏;
            font-size: 30px;
            color: yellow;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<!--头部-->
<header>
    <div class="row">
        <div class="col-md-2">
<!-- 这里需要改-->
            <a href="/" id="logo">
                +v看蟹黄堡秘方
            </a>
        </div>
        <div class="col-md-10">
            <span class="pull-right" style="color: #eee;line-height: 50px">
                <a href="#"><i class="glyphicon glyphicon-bell"></i>  系统管理员<i class="glyphicon glyphicon-user"></i></a>
            </span>

        </div>
    </div>
</header>
<!-------导航开始--->
<section>
    <div class="row">
        <div class="col-md-2">
            <!--折叠开始-->
            <div class="panel-group" id="accordion">
                <!-- 导航1-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a  data-toggle="collapse" data-parent="#accordion"
                               href="#collapseOne">
                                <i class="glyphicon glyphicon-file"></i> 员工资料
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body" >
                            <ul style="list-style: none">
                                <li><a href="/myindex.html" @click="add()">基本资料</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  导航2-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a  data-toggle="collapse" data-parent="#accordion"
                               href="#collapseTwo">
                                 <i class="glyphicon glyphicon-list-alt"></i> 人事管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul style="list-style: none">
                                <li><a href="#">员工资料</a></li>
                                <li><a href="#">员工奖惩</a></li>
                                <li><a href="#">员工培训</a></li>
                                <li><a href="#">员工调薪</a></li>
                                <li><a href="#">员工调动</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 导航3-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a  data-toggle="collapse" data-parent="#accordion"
                               href="#collapseThree">
                                <i class="glyphicon glyphicon-yen"></i> 薪资管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul style="list-style: none">
                                <li><a href="#">工资账套管理</a></li>
                                <li><a href="/index-employee.html">员工账套管理</a></li>
                                <li><a href="#">工资表管理</a></li>
                                <li><a href="#">月末管理</a></li>
                                <li><a href="#">工资表查询</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  导航4-->
                <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a  data-toggle="collapse" data-parent="#accordion"
                           href="#collapse4">
                           <i class="glyphicon glyphicon-signal"></i> 统计管理
                        </a>
                    </h4>
                </div>
                <div id="collapse4" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul style="list-style: none">
                            <li><a href="#">综合信息统计</a></li>
                            <li><a href="#">员工积分统计</a></li>
                            <li><a href="#">人事信息统计</a></li>
                            <li><a href="#">人事记录统计</a></li>
                        </ul>
                    </div>
                </div>
            </div>
                <!-- 导航5-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a  data-toggle="collapse" data-parent="#accordion"
                               href="#collapse5">
                               <i class="glyphicon glyphicon-th-large"></i> 系统管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul style="list-style: none">
                                <li><a href="#">基础信息设置</a></li>
                                <li><a href="#">系统管理</a></li>
                                <li><a href="#">操作日志管理</a></li>
                                <li><a href="#">操作员管理</a></li>
                                <li><a href="#">备份恢复数据库</a></li>
                                <li><a href="#">初始化数据库</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--折叠结束-->
        </div>
        <div class="col-md-10" style="color: black">
            <table border="1" width="70%" style="text-align: center">
                <caption style="color: #ffc600"><a href="#"><b>首页 </b></a> > <a href="#"> 员工账套管理</a></caption>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>工号</th>
                    <th>电子邮件</th>
                    <th>电话号码</th>
                    <th>所属部门</th>
                    <th>所属部门</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(e,i) in e_arr">
                    <td>{{i+1}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.workID}}</td>
                    <td>{{e.email}}</td>
                    <td>{{e.phone}}</td>
                    <td>{{e.departmentId}}</td>
                    <td><a href="#">市场工资账套</a></td>
                    <td><a href="#">修改工资账套</a></td>
                </tr>
            </table>
        </div>
    </div>
</section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/header.js"></script>
<script>
    let section_vm = new Vue({
        el: "section",
        data: {
            e_arr:[],
        },
        created: function () {
            axios.get("/employee/select").then(function (response) {
                section_vm.e_arr = response.data;
            })

            // axios.get("/dept/select").then(function (response) {
            //     section_vm.e_arr = response.data;
            // })
        },
    })
</script>
</body>
</html>